<template lang='pug'>
	.mui-content
		#slider.mui-slider.mui-fullscreen(@slide="changeTab")
			.mui-input-row.mui-search.muiIput
				input.mui-input-clear(type="search",placeholder="购物先搜劵，年省能过万",disabled='')
			.shopping
				i.iconfont.icon-shangchangtubiao-6
			#sliderSegmentedControl.mui-scroll-wrapper.mui-slider-indicator.mui-segmented-control.mui-segmented-control-inverted
				#scrollM.mui-scroll
					template(v-for='(nav,index) in menus')
						a.mui-control-item.getScrolls(:href="'#'+nav.nav", :class="{'mui-active':index==0}", @tap.native='alert(index,$event)')
							span.getScroll {{nav.name}}
			.checkHome(@tap='showPopover')
				i.iconfont(:class='classChange')
			.hideMenus(:class='{menuShow:IsShow,menuHidden:!IsShow}')
				ul
					li.menuFont(v-for='(item,index) in menus', :class='{changeCheck:index==setIndex}', @tap='setIdex(index)') {{item.name}}
			.mui-slider-group.muiMargin
				template(v-for='(item,index) in menus')
					.mui-slider-item.mui-control-content(:id='item.nav', :class="{'mui-active':index==0}")
						#scroll1.mui-scroll-wrapper
							.mui-scroll(v-if='index==0')
								#slider.mui-slider
									.mui-slider-group.mui-slider-loop
										.mui-slider-item.mui-slider-item-duplicate
											a(href="#")
												img(:src="logo2")
										.mui-slider-item(v-for="item in items")
											a(href="#")
												img(:src="item.src")
										.mui-slider-item.mui-slider-item-duplicate
											a(href="#")
												img(:src="logo1")
									.mui-slider-indicator
										.mui-indicator(v-for='(item,index) in items', :class="{'mui-active ':index===0}")
								ul.mui-table-view.mui-grid-view.mui-grid-9(style='margin:5px 0px;background-color:#FFFFFF;')
									template(v-for='(item,index) in navs')
										li.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3.fenleilist(style='border-right:none;border-bottom:none;width:20%;padding:11px;font-size:12px;')
											a(name='item.name', :href='item.href')
												span.mui-icon.iconfont.iconColor(:class='item.icon')
												.mui-media-body(style='font-size:12px;')
													| {{item.name }}
								div.biqiang
									span.fontToday 今日必抢
									span.fontTime 每天9:00
									span.fontPro
										| 爆款天天好货
										i.iconfont.icon-xiayibu
								.mui-slider
									.mui-slider-group
										.mui-slider-item(v-for='(n,index) in 2' :class = "{'mui-active':index == 0}")
											ul.mui-table-view.mui-grid-view
												li.mui-table-view-cell.mui-media.mui-col-xs-4.repairPadding
													a(href='#')
														img.mui-media-object(:src='test')
														.mui-media-body Color of SIP CBD
														div
															span.fontR ￥12
															span.fontCard 劵后价
												li.mui-table-view-cell.mui-media.mui-col-xs-4.repairPadding
													a(href='#')
														img.mui-media-object(src='./img/yuantiao.jpg')
														.mui-media-body 静静看这世界
														div
															span.fontR ￥12
															span.fontCard 劵后价
												li.mui-table-view-cell.mui-media.mui-col-xs-4.repairPadding
													a(href='#')
														img.mui-media-object(src='./img/yuantiao.jpg')
														.mui-media-body 静静看这世界
														div
															span.fontR ￥12
															span.fontCard 劵后价
								ul.mui-table-view.sub-table(style='background-color:transparent;')
									ul.mui-table-view.mui-grid-view(style='margin-top:7px;background-color:#fff;padding:0 6px 2px 0;')
										li.mui-table-view-cell.mui-media.mui-col-xs-6(style='padding:7px 0 0 13px;')
											a(href='#')
												img.mui-media-object(style='border-radius:5px', src='./img/ad1.jpg')
										li.mui-table-view-cell.mui-media.mui-col-xs-6(style='padding:7px 0 0 13px;')
											a(href='#')
												img.mui-media-object(style='border-radius:5px', src='./img/ad2.jpg')
										li.mui-table-view-cell.mui-media.mui-col-xs-6(style='padding:7px 0 0 13px;')
											a(href='#')
												img.mui-media-object(style='border-radius:5px', src='./img/ad3.jpg')
										li.mui-table-view-cell.mui-media.mui-col-xs-6(style='padding:7px 0 0 13px;')
											a(href='#')
												img.mui-media-object(style='border-radius:5px', src="./img/ad4.jpg")
									// 上新区域
									#banner
										span
											i.iconfont.icon-shangchangtubiao-
											| 实时上新
										span
											i.iconfont.icon-shangchangtubiao-7
											| 独家优惠
										span
											i.iconfont.icon-shangchangtubiao-14
											| 全场包邮
										canvas#myCanvas(width='100%', height='100%')
									template(v-for='data in item.contentData')
										li.mui-media.viewBody(style='margin:3px 0;background-color:#ffffff;')
											a(href='javascript:;')
												img.mui-media-object.mui-pull-left(v-lazy='lazyImg', style='border-radius:4px;')
												.mui-media-body(style='font-size:14px;')
													span.mui-badge.mui-badge-danger.muiBadge 天猫
													p.pageTwo 泰国正品Sivanna思薇娜化妆套刷粉底初学者彩妆工具12件套套装的好
													p(style='margin-top:24px')
														span.mui-ellipsis(style='font-size:12px;text-decoration:line-through;color:#888888') ￥12
														span.mui-ellipsis(style='font-size:12px;margin:0 0 12px 10px;color:#888888')
															| 劵后价
															span(style='font-size:14px;color:#FF5E52;') ￥10
													span.mui-badge.mui-badge-danger(style='float:left;') 领劵立减100元
													button.mui-btn.mui-btn-danger.mui-btn-outlined.getCard(type='button') 立即领取
								// end
							.mui-scroll(v-if='index!=0')
								ul.mui-table-view.TabMargin
									li.viewBody.mui-media.muiLi(v-for='data in item.contentData')
										a(href='javascript:;')
											img.mui-media-object.muiListImg(v-lazy='lazyImg', style='border-radius:4px')
											.mui-media-body(style='font-size:14px')
												span.mui-badge.mui-badge-danger.muiBadge 天猫
												p.pageTwo 泰国正品Sivanna思薇娜化妆套刷粉底初学者彩妆工具12件套套装的好
												p(style='margin-top:24px')
													span.mui-ellipsis(style='font-size:12px;text-decoration:line-through;color:#888888') ￥12
													span.mui-ellipsis(style='font-size:12px;margin:0 0 12px 10px;color:#888888')
														| 劵后价
														span(style='font-size:14px;color:#FF5E52;') ￥10
												span.mui-badge.mui-badge-danger(style='float:left;') 领劵立减100元
</template>
<script>  
  import 'static/js/mui.pullToRefresh.js'
  import 'static/js/mui.pullToRefresh.material.js'
	import mui from 'static/js/mui'
	import item1 from './img/shuijiao.jpg'
	import item2 from './img/yuantiao.jpg'
  export default {
    data () {
      return {
      	logo1:item1,
      	logo2:item2,
      	test:require('./img/shuijiao.jpg'),
        lazyImg: '',
        setIndex: 0,
        classChange: 'icon-30-copy',
        IsShow: false,
        items: [{
          href: '#',
          src:item1
        }, {
          href: '#',
          src:item2
        }],
        navs: [{
          name: '女装',
          href: '#',
          icon: 'icon-nvzhuang'
        },
          {
            name: '母婴',
            href: '#',
            icon: 'icon-muying'
          },
          {
            name: '化妆品',
            href: '#',
            icon: 'icon-huazhuangpin'
          },
          {
            name: '居家',
            href: '#',
            icon: 'icon-xingzhuang33'
          },
          {
            name: '鞋包配饰',
            href: '#',
            icon: 'icon-xiebaopeishi'
          },
          {
            name: '美食',
            href: '#',
            icon: 'icon-meishi'
          },
          {
            name: '文体车品',
            href: '#',
            icon: 'icon-wenti'
          },
          {
            name: '数码家电',
            href: '#',
            icon: 'icon-jiadianshumashouji'
          },
          {
            name: '男装',
            href: '#',
            icon: 'icon-nanzhuang'
          },
          {
            name: '更多类目',
            href: '#',
            icon: 'icon-gengduo-copy'
          },
        ],
        menus: [{
          name: '精选',
          nav: 'item1mobile',
          contentData: false
        },
          {
            name: '男装',
            nav: 'item2mobile',
            contentData: false
          },
          {
            name: '女装',
            nav: 'item3mobile',
            contentData: false
          },
          {
            name: '母婴',
            nav: 'item4mobile',
            contentData: false
          },
          {
            name: '化妆品',
            nav: 'item5mobile',
            contentData: false
          },
          {
            name: '内衣',
            nav: 'item6mobile',
            contentData: false
          },
          {
            name: '配饰',
            nav: 'item7mobile',
            contentData: false
          }, {
            name: '鞋品',
            nav: 'item8mobile',
            contentData: false
          }, {
            name: '家电',
            nav: 'item9mobile',
            contentData: false
          }, {
            name: '居家',
            nav: 'item10mobile',
            contentData: false
          }, {
            name: '箱包',
            nav: 'item11mobile',
            contentData: false
          }
        ],
        count: 0,
        tabsOne: [{
          name: '第一个子项'
        }],
        tabsTwo: [{
          name: '第二个子项'
        }],
        Isloading: true

      }
    },
    created () {},
    mounted () {
      mui.init()
      var that = this;
      (function ($) {
        //阻尼系数
        var deceleration = mui.os.ios ? 0.003 : 0.0009
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: false, //是否显示滚动条
          deceleration: deceleration
        })
        $.ready(function (callback) {
          //循环初始化所有下拉刷新，上拉加载。
          $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
            $(pullRefreshEl).pullToRefresh({
              down: {
                callback: function () {
                  var self = this
                  that.tabDown(index, self)
                }
              },
              up: {
                height: 50, //可选.默认50.触发上拉加载拖动距离
                auto: false, //可选,默认false.自动上拉加载一次
                contentrefresh: '<a class="loadingImages"></a>', //可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '已到底了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                callback: function () {
                  var self = this
                  that.tabUp(index, self)
                }
              }
            })
          })
        })
      })(mui)
      //加载首页数据这里是模拟ajax请求，请求完后赋值contentData就可以了
      this.menus[0].contentData = [{
        title: ''
      }, {
        title: ''
      }, {
        title: ''
      }, {
        title: ''
      }]
      //canvas背景
      this.init()
      //滑动切换
      mui('.mui-slider').slider()
      //模拟图片ajax加载
      setTimeout(function () {
        that.lazyImg = require('./img/ad1.jpg')
      }, 3000)
    },
    components: {},
    methods: {
      init () {
        var getW = document.getElementById('banner')
        var myCanvas = document.getElementById('myCanvas')
        var ctx = myCanvas.getContext('2d')
        var mW = myCanvas.width = getW.clientWidth
        var mH = myCanvas.height = getW.clientHeight

        function drawLine (x, y, color, type) {
          //ctx.clearRect(0,0,mW,mH);
          ctx.beginPath()
          ctx.lineCap = 'round'
          ctx.lineJoin = 'round'
          if (type) ctx.moveTo(0, mH / 2)
          if (!type) ctx.moveTo(mW, mH / 2)
          ctx.lineWidth = 1
          ctx.lineTo(x, y)
          ctx.strokeStyle = color
          ctx.stroke()
          ctx.beginPath()
          ctx.lineWidth = 5
          if (type) ctx.lineTo(x + 2, y)
          if (!type) ctx.lineTo(x - 2, y)
          ctx.stroke()
        }

        drawLine(mW / 10, mH / 2, '#d19213', true)
        drawLine(mW / 10 * 9, mH / 2, '#d19213')
        document.getElementById('banner').style.backgroundImage = 'url("' + myCanvas.toDataURL() + '")'
      },
      tabDown (index, self) {
        //下拉刷新数据这里是模拟ajax请求，请求完后赋值contentData就可以了
        console.log('刷新获取子项：' + index + '获取对象：' + self)
        var data = [{
          name: '刷新内容1'
        },
          {
            name: '刷新内容2'
          }
        ]
        this.tabsOne = this.tabsOne.concat(data)
        mui.toast(this.menus[index].name + '已刷新')
        setTimeout(function () {
          self.endPullDownToRefresh()
        }, 500)
      },
      tabUp (index, self) {
        //上拉加载更多数据这里是模拟ajax请求，请求完后赋值contentData就可以了
        console.log('下拉获取子项：' + index + '获取对象：' + self)
        var data = [{
          name: '加载内容1'
        },
          {
            name: '加载内容2'
          }
        ]
        this.tabsOne = this.tabsOne.concat(data)
        mui.toast(this.menus[index].name + '已加载')
        setTimeout(function () {
          self.endPullUpToRefresh()
        }, 1000)
      },
      changeTab (e) {
        var that = this
        var index = e.detail.slideNumber
        this.setIndex = index
        //加载初次数据这里是模拟ajax请求，请求完后赋值contentData就可以了
        if (index >= 0) {
          app.Vwaiting('加载中...')
          setTimeout(function () {
            app.Cwaiting()
            that.menus[index].contentData = [{
              name: '1'
            },
              {
                name: '1'
              }, {
                name: '1'
              }, {
                name: '1'
              }
            ]
            document.querySelectorAll('.mui-pull-bottom-wrapper')[index].style.display = 'block'
          }, 1000)
        }
      },
      showPopover () {
        if (this.classChange == 'icon-30-copy') {
          this.classChange = 'icon-6'
          this.IsShow = true
        } else {
          this.classChange = 'icon-30-copy'
          this.IsShow = false
        }
      },
      setIdex (index) {
        var vm = this
        this.setIndex = index
        mui('#slider').slider().gotoItem(index)
        //关闭菜单
        setTimeout(function () {
          vm.showPopover()
        }, 500)
      },
      alert (index, e) {
        this.setIndex = index
        console.log('zheshi:' + index)
        console.log(e.target)
      }

    }
  }
</script>

<style scoped>
	@import '~static/common/common.css';
  .mui-content,
  body,
  html {
    height: 100% !important
  }

  .mui-slider-indicator.mui-segmented-control {
    background-color: #efeff4;
  }

  .mui-slider .mui-slider-group .mui-slider-item > a:not(.mui-control-item) {
    display: inline;
  }

  .mui-slider .mui-segmented-control.mui-segmented-control-inverted ~ .mui-slider-group .mui-slider-item {
    border-top: none;
    border-bottom: none
  }

  .mui-slider .mui-slider-group .mui-slider-item img {
    width: 100%;
    height: 125px;
  }

  .mui-slider-indicator .mui-indicator {
    width: 10px;
    height: 2px;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.5);
  }

  .mui-slider-indicator .mui-active.mui-indicator {
    background: #FF5E52;
  }

  .muiTab {
    height: auto
  }

  .muiTab .mui-table-view {
    height: 100%
  }

  .muiLi {
    width: calc(50% - 2px);
    border: 1px solid #e8e8e8;
    display: inline-block;
  }

  .muiLi:nth-child(2n) {
    margin-left: 4px
  }

  .mui-table-view-cell:after {
    background-color: rgba(255, 255, 255, 0);
  }

  .muiBadge {
    position: absolute;
    border-radius: 5px
  }

  .fontR {
    color: #FF5E52;
    font-size: 15px
  }

  .fontCard {
    color: #c1bcbc;
    font-size: 12px
  }

  .fontToday {
    color: #FF5E52;
    font-size: 15px;
    margin: 10px;
    margin-bottom: -10px
  }

  .fontTime {
    color: 333;
    font-size: 10px
  }

  .fontPro {
    font-size: 10px;
    color: #FF5E52;
    float: right;
    margin-right: 10px;
  }

  .muiMargin {
    margin-top: 24px
  }

  .muiIput input[type='search'] {
    width: calc(100% - 40px);
    margin: 5px;
    height: 24px;
    font-size: 12px;
    border-radius: 12px;
    background-color: rgba(78, 65, 65, 0.1);
  }

  .mui-search .mui-placeholder {
    text-align: left;
    font-size: 12px;
    line-height: 12px
  }

  .muiIput .mui-icon-search:before {
    font-size: 14px
  }

  .mui-search .mui-placeholder {
    top: 6px;
    right: 0;
    bottom: 0;
    left: 8px;
  }

  /*图标*/

  .shopping .icon-shangchangtubiao-6 {
    font-size: 24px
  }

  .shopping {
    position: absolute;
    top: 6px;
    right: 6px
  }

  .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
    font-size: 10px
  }

  .pageTwo {
    text-indent: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .fontPro .icon-xiayibu {
    margin-left: 5px;
    font-size: 12px;
  }

  .viewBody {
    padding: 11px 15px
  }

  .mui-badge {
    padding: 6px 6px
  }

  .getCard {
    font-size: 10px;
    float: right;
    padding: 3px;
    height: 24px
  }

  #banner {
    position: relative;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #111;
    margin: 3px 0px -3px 0px;
    border-bottom: 1px dashed #e8e8e8;
    background: rgba(255, 94, 82, 0.3) no-repeat;
  }

  #myCanvas {
    position: absolute;
    top: 0;
    left: 0
  }

  .icon-shangchangtubiao- {
    color: #bfae25
  }

  .icon-shangchangtubiao-7 {
    color: #ec6b5d
  }

  .icon-shangchangtubiao-14 {
    color: #36a955
  }

  .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {
    height: 100px
  }

  .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
    border-bottom: 2px solid #fff
  }

  .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
    color: #FF5E52;
    border-bottom: 2px solid #FF5E52
  }

  /*第二个样式*/

  .muiLi .mui-media-object {
    line-height: 122px;
    max-width: 100%;
    height: 122px;
  }
   
  .mui-segmented-control.mui-segmented-control-inverted {
    border: 0;
    border-radius: 0;
    width: calc(100% - 40px);
  }

  .checkHome {
    width: 40px;
    height: 38.3px;
    line-height: 38.3px;
    position: absolute;
    top: 33.5px;
    right: 0;
    text-align: center;
    background: #fff;
    z-index: 2;
    border-left: 1px dashed #f5efef;
  }

  .mui-slider-indicator.mui-segmented-control {
    background-color: #fff;
  }

  .mui-segmented-control .mui-control-item {
    line-height: 36px;
  }

  .hideMenus {
    visibility: hidden;
    width: 100%;
    height: auto;
    position: absolute;
    z-index: 9;
    background: rgba(255, 255, 255, 1)
  }

  .hideMenus ul li {
    float: left
  }

  .menuFont {
    height: 25px;
    line-height: 22px;
    text-align: center;
    margin: 7px;
    border-radius: 20px;
    padding: 1px 10px;
    border: 1px solid #d8d8d8;
    color: #333;
  }

  .changeCheck {
    color: #fff;
    background: #FF5E52;
    border: 1px solid #FF5E52
  }

  .TabMargin {
    margin-top: 8px
  }

  /*菜单显示和隐藏过渡效果*/

  .menuShow {
    visibility: visible;
    height: 117px;
    opacity: 1;
    transition: all 0.5s
  }

  .menuHidden {
    visibility: hidden;
    height: 0px;
    opacity: 0;
    transition: all 0.5s
  }

  .mui-pull-bottom-pocket .mui-pull-loading {
    background: #FF5E52
  }

/*懒加载样式*/
  /*img[lazy=loading] {
    background: url(./img/loading.gif) no-repeat center center;
    background-size: cover
  }

  img[lazy=error] {
    background: url(./img/loading.gif) no-repeat center center;
    background-size: cover
  }*/

  .biqiang {
    background: #fff;
    height: 1.2rem;
    line-height: 1.2rem
  }

  .mui-table-view.mui-grid-view .repairPadding {
    padding-top: 5px
  }
	.mui-slider-group,.mui-slider-item,.mui-slider-item > a,.mui-slider-item > a img{
		height:125px
	}
</style>
